<template>
  <div class="app-container">

    <div class="trading_head">
      <div class="head_twoa">
        <p>
          总订单数量：
        </p>
        <div class="down">
          <div class="down_right">{{OrderSum.total}}</div>
        </div>
      </div>

      <div class="head_twoa">
        <p>
          昨日新增订单：
        </p>
        <div class="down">
          <div class="down_right">{{OrderSum.yesterday}}</div>
        </div>
      </div>

      <div class="head_twoa">
        <p>
          今日新增订单：
        </p>
        <div class="down">
          <div class="down_right">{{OrderSum.today}}</div>
        </div>
      </div>
    </div>

    <div>
      <h4 style="color:#33CCCC">充值订单数据统计</h4>
      <hr><br>
      <el-form size="mini" :inline="true">
        <el-form-item class="input_co"   label="">
          <el-select v-model="lineChartActiveSerach.timespan" @change="selectDaysChange" placeholder="最近7天">
              <el-option value="1" label="最近7天">最近7天</el-option>
              <el-option value="2" label="最近15天">最近15天</el-option>
              <el-option value="3" label="最近30天">最近30天</el-option>
              <el-option value="4" label="3个月">3个月</el-option>
              <el-option value="5" label="6个月">6个月</el-option>
              <el-option value="6" label="12个月">12个月</el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="start" class="input_co"   label="选择日期">
          <el-date-picker class="input_s" @change="changeMonth" v-model="lineChartActiveSerach.yearmonth" type="month" placeholder="" value-format="yyyy-MM"></el-date-picker>
        </el-form-item>
       <!-- <el-form-item prop="end" class="input_co1"   label="——">
          <el-date-picker class="input_s"  v-model="formInline.end" type="datetime" placeholder="" value-format="timestamp"></el-date-picker>
        </el-form-item  >-->
        <el-button size="mini" @click="echartsRegisterSetOption()" icon="el-icon-search">查询</el-button>
      </el-form>
      <!--<div id="myChart" :style="{width: '300px', height: '300px'}"></div>-->
      <div id="echartContainer" style="width:90%; height:500px"></div>
    </div>
  </div>
</template>
<script>
  import { getOrderCountAPI , getYesterdayOrderCountAPI} from '@/api/dataCenter'
  import { mapGetters } from 'vuex'
  var echarts = require('echarts')
  //import moment from 'moment'
  export default {
    // 角色管理
    name: 'OrderDate',
    data() {
      return {
        formInline: {
          name: '',
          page: 0,
          pagenum: 10,
          total: 0
        },
        lineChartActiveSerach:{
          yearmonth:'',
          timespan:'1'
        },
        OrderSum:{
          total: 0,
          yesterday: 0,
          today: 0
        },
        myChart:'',
        dialog: {
          status: false,
          id: null
        },
        loading: false,
        orderList:[], // 订单折线图
      }
    },
    computed: {
      ...mapGetters([
        'buttons',
      ])
    },
    methods: {
      // 用户注册增加的折线图
      echartsRegisterSetOption(){
        getOrderCountAPI(this.lineChartActiveSerach).then(res => {
          if (res.code === 0) {
            let newDayArray=[];
            let lineAddUserData=[]
            this.orderList = res.data.list
            for(let i=0;i< this.orderList.length;i++){ // 充值的数据
              newDayArray.push(this.orderList[i].createtime) // 获取横坐标的值
              lineAddUserData.push(this.orderList[i].ordercount)
            }
            // 绘制图表
            this.myChart.setOption({
              title: {
                text: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              /* legend: {
                 data:['提现','充值']
               },*/
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: newDayArray
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name:'增加订单',
                  type:'line',
                  stack: '总量',
                  data:lineAddUserData
                }
              ]
            });
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      selectDaysChange(){
        this.lineChartActiveSerach.yearmonth = ''
      },
      changeMonth(){
        this.lineChartActiveSerach.timespan = ''
      },
      getCount(){
        // 获取页面顶部的汇总数据
        getYesterdayOrderCountAPI().then(res => {
          if (res.code === 0) {
            this.OrderSum = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },

    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
       this.myChart = echarts.init(document.getElementById('echartContainer'));
      this.echartsRegisterSetOption()
      this.getCount()
    }
  }
</script>
<style>
  .trading_head{
    background: #33CCCC;
    height: 133px;
    color: white;
    padding: 11px;
  }
  .head_twoa{
    width:32%;
    height:120px;
    float:left;
  }
  .down{
    margin-left:20px;
  }
  .down_left{
    float: left;
    margin-top: -9px
  }
  .down_right{
    float: left;
    margin-right: 20px;
    margin-top: 11px;
    font-size: 32px;
  }
</style>
